<template>
    <div id="jianshen" v-infinite-scroll="loadMore"
     infinite-scroll-disabled="busy"
     infinite-scroll-distance="10">
        <div class="topBanner">
            <router-link class="left" tag="div" :to="{ name: 'collect'}">
                <i :style= "'background-image: url('+$qiniu.url+'assets/img/newxin.png)'"></i>
                我的收藏
            </router-link>
            <div class="right">
                <div class="wrapper" id="btnwrapper">
                    <!--<div class="btn">-->
                        <mt-switch  @change = "all">全部视频</mt-switch>
                    <!--</div>-->
                </div>
            </div>
        </div>
        <div class="video" v-if="JianshenData.data!=null">
            <div  class="video-wrapper clearfix" v-for="item in JianshenData.data" >
                <p>{{ item.timeLable }}</p>
                <List :JSdata = "item.list"></list>
            </div>
            <div class="more"><i class="loading-more" :style= "'background-image: url('+$qiniu.url+'assets/img/loadingnew.gif)'"  ></i></div>
        </div>
        <div v-else>
            {{ JianshenData.message }}
        </div>
        <Loading class="load" v-if="LoadingShow"></Loading>
    </div>
</template>
<script>
    import List from './list.vue';
    import Loading from '../loading.vue';
    //引入mintUI 的组件
    import {
        Switch
    } from 'mint-ui';
    import {
        errFun,
        refreshTitle
    } from "../../tools.js";
    import api from "../../api";
    import {
        interceptors1,
        interceptors2,
        wechat
    } from "../../api";
    import Vue from 'vue'
    import infiniteScroll from 'vue-infinite-scroll';
    Vue.use(infiniteScroll);
    //引入mintUI 的样式
    import 'mint-ui/lib/Switch/style.css';
    export default {
        components: {
            List,
            Loading,
        },
        created() {
            refreshTitle(this.$route.meta.title);
        },
        data() {
            return {
                JianshenData: {
                    data: [],
                    message: [],
                },
                page: 1,
            }
        },
        computed: {
            LoadingShow() {
                //仅仅当第一次的时候进行loading
                if (this.page == 1) {
                    return this.$store.state.loadings.show
                }
            },
        },
        methods: {
            all() {
                var btn = document.querySelector("#btnwrapper");
                btn.classList.toggle("active");
                // btn.style.backgroundImage = 'url(' + this.$qiniu.url + 'assets/img/check.png)';
                var that = this;
                var list = document.querySelectorAll("li");
                var videos = document.querySelectorAll("#LISTData");
                if (btn.className == "wrapper active") {
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].getAttribute("show") == null) {
                            videos[i].style.display = "none";
                        } else if (list[i].getAttribute("show") == 'true') {
                            videos[i].style.display = "block";
                        }
                    }
                } else {
                    for (var i = 0; i < list.length; i++) {
                        videos[i].style.display = "block";
                    }
                }

            },
            getJianshen() {
                var that = this;
                var more = document.querySelector(".loading-more");
                if (that.page > 1) {
                    if (more) {
                        more.style.display = "block";
                    }
                }

                api.getJianshenInfo(that.page).then(function(result) {
                    // that.$store.dispatch('HIDDEN_LOADING_SHOW');
                    if (more) {
                        more.style.display = "none";
                    }
                    // result.data.result[0].list[0].isHaveVideo = true; //测试是否上传视频
                    if (result.data.code == 200) {
                        that.JianshenData.data.push.apply(that.JianshenData.data, result.data.result);
                    } else {
                        that.JianshenData.message = result.data.message;
                    }
                })
            },
            loadMore: function() {
                var btn = document.querySelector("#btnwrapper");
                if (btn.className == "wrapper active") {
                    return false; //如果当点击删选的时候，禁止上拉加载更多
                } else {
                    var self = this;
                    self.busy = true;
                    setTimeout(function() {
                        self.page++;
                        self.busy = false
                    }, 600)
                }
            }
        },
        mounted() {
            this.$nextTick(function() {
                this.getJianshen();
            })
        },
        watch: {
            page: {
                handler: function(val, oldVal) {
                    this.getJianshen();
                },
                deep: true
            }
        },
    }
</script>
<style>
    #jianshen {
        .topBanner {
            width: 100%;
            height: 50px;
            overflow: hidden;
        }
        .topBanner .left {
            width: 30%;
            height: 30px;
            margin-top: 10px;
            /*background-color: #00bb9c;*/
            border: 1px solid #fdb801;
            font-size: 14px;
            padding-top: 4px;
            /*line-height: 30px;*/
            padding-left: 10%;
            box-sizing: border-box;
            color: #fdb801;
            margin-left: 10px;
            float: left;
            border-radius: 5px;
            position: relative;
        }
        .topBanner .left i {
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            top: 3px;
            left: -60%;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .topBanner .right {
            width: 40%;
            height: 30px;
            margin-top: 10px;
            float: right;
            text-align: left;
            font-size: 16px;
            line-height: 30px;
            color: #888;
            padding-right: 10px;
        }
        .topBanner .right .wrapper {
            float: right
        }
        .topBanner .right .btn {
            width: 50px;
            height: 30px;
            background-size: 50px 30px;
            float: left;
            margin-right: 4px;
            /*margin-top:-4px;*/
        }
        .topBanner .right .btn.active {
            background-size: 50px 30px;
        }
        .video {
            width: 100%;
            padding-left: 10px;
            background-color: #161616;
        }
        .video .video-wrapper {
            width: 100%;
            padding-top: 10px;
            box-sizing: border-box;
        }
        .video .video-wrapper p {
            font-size: 14px;
            line-height: 20px;
            color: #fff;
        }
        .more {
            width: 100%;
            height: 40px;
            color: #fff;
            text-align: center;
            position: relative;
        }
        .more .loading-more {
            width: 30px;
            height: 30px;
            /*background-color: red;*/
            background-size: 30px 30px;
            position: absolute;
            left: -7%;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: block;
        }
        .mint-switch {
            display: -webkit-flex;
        }
        .mint-switch-input:checked+.mint-switch-core {
            border-color: #4cd864;
            background-color: #4cd864;
        }
        .mint-switch-label {
            color: #fdb801;
        }
        .mint-switch-input:checked+.mint-switch-core::before {
            -webkit-transform: scale(0);
        }
    }
</style>